---
section: Transforms
title: Transform
slug: /docs/transform/
order: 1
---

# Transform

Utilities for controlling transform behaviour.

<carbon-ad />

| React props         | CSS Properties                                                                                                                                                                                                                                                                                                                                                         |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `transform`         | `--x-translate-x: 0;`<br />`--x-translate-y: 0;`<br />`--x-rotate: 0;`<br />`--x-skew-x: 0;`<br />`--x-skew-y: 0;`<br />`--x-scale-x: 0;`<br />`--x-scale-y: 0;`<br />`transform: translate3d(var(--x-translate-x), var(--x-translate-y), 0) rotate(var(--x-rotate)) skewX(var(--x-skew-x)) skewY(var(--x-skew-y)) scaleX(var(--x-scale-x)) scaleY(var(--x-scale-y));` |
| `transform={value}` | `transform: {value};`                                                                                                                                                                                                                                                                                                                                                  |

## Compose transformations

To enable transformations you have to add the `transform` utility.

```jsx preview color=amber
<>
  <template preview>
    <x.div
      display="flex"
      flexDirection={{ xs: 'column', md: 'row' }}
      justifyContent="space-around"
      spaceY={{ xs: 0, md: 12 }}
      spaceY={{ xs: 12, md: 0 }}
    >
      <x.div w={16} h={16} bg="amber-300" borderRadius="md">
        <x.img
          h={16}
          w={16}
          transform
          rotate={45}
          borderRadius="md"
          src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
        />
      </x.div>
      <x.div w={16} h={16} bg="amber-300" borderRadius="md">
        <x.img
          h={16}
          w={16}
          transform
          skewY={12}
          borderRadius="md"
          src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
        />
      </x.div>
      <x.div w={16} h={16} bg="amber-300" borderRadius="md">
        <x.img
          h={16}
          w={16}
          transform
          scale={0.5}
          borderRadius="md"
          src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
        />
      </x.div>
      <x.div w={16} h={16} bg="amber-300" borderRadius="md">
        <x.img
          h={16}
          w={16}
          transform
          translateX={4}
          translateY={4}
          borderRadius="md"
          src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
        />
      </x.div>
    </x.div>
  </template>
  <x.img transform rotate={45} />
  <x.img transform skewY={12} />
  <x.img transform scale={0.5} />
  <x.img transform translateX={4} translateY={4} />
</>
```

> Note that because xstyled implements transforms using [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), the transform utilities are not supported in older browsers like IE11. If you need transforms for your project and need to support older browsers, specify explicit transformation (ex: `transform="rotate(45deg)").

## Custom transformations

It is also possible to specify a completely custom transformation.

```jsx preview color=fuchsia
<>
  <template preview>
    <x.div
      display="flex"
      flexDirection={{ xs: 'column', md: 'row' }}
      justifyContent="space-around"
      spaceY={{ xs: 0, md: 12 }}
      spaceY={{ xs: 12, md: 0 }}
    >
      <x.div w={32} h={32} bg="fuchsia-300">
        <x.img
          h={32}
          w={32}
          transform="scale(1.5, 0.5) skew(30deg, 20deg)"
          rotate={45}
          src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80"
        />
      </x.div>
    </x.div>
  </template>
  <x.img transform="scale(1.5, 0.5) skew(30deg, 20deg)" />
</>
```

## Responsive

To use transforms at a specific breakpoint, use responsive object notation. For example, adding the property `transform={{ md: true }}` to an element would apply the `transform={true}` utility at medium screen sizes and above.

```jsx
<x.div transform={{ md: true }} />
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.

## Customizing

import CustomizeTransforms from '../../../partials/customizing/transforms.mdx'

<CustomizeTransforms />

## Styled bindings

### Automatic

Using xstyled's `styled`, all transformations defined are automatically bound to `transform` attribute:

```js
import styled from '@xstyled/...'

const Card = styled.h4`
  transform: card;
`
```

To learn more about styled syntax, read [styled syntax documentation](/docs/magic-styled-components/).

### Manual

It is possible to manually bind a transformation using `th.transform` utility:

```js
import styled from '...'
import { th } from '@xstyled/...'

const Card = styled.h4`
  font: ${th.transform('card')};
`
```

## Hooks

Get a font size in any component using `useTransform` hook:

```js
import { useTransform } from '@xstyled/...'

function Card() {
  const transform = useTransform('card')
}
```
